<template>
	<view class="content">
		<view class="banner">
			<swiper class="screen-swiper square-dot" circular="true" autoplay="true"
				interval="5000" duration="500">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<image :src="item.img" mode="aspectFill"></image>
					<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
				</swiper-item>
			</swiper>
		</view>
		<view class="cont">
			<view class="index_share">
				<view class="flex">
					<view class="flex-1" v-if="!isLogin" @click="goUrl()">
						<view class="title">分享得好礼</view>
						<view class="smallWen">领取分享奖励</view>
					</view>
					<view class="flex-1" v-if="isLogin" style="position: relative;">
						<view class="title">分享得好礼</view>
						<view class="smallWen">领取分享奖励</view>
						<button open-type="share" style="position: absolute;background: transparent;width: 100%;height: 100%;left: 0;top: 0">
							
						</button>
					</view>
					<view class="flex-1" @click="goZhishi">
						<view class="title">健康知识</view>
						<view class="smallWen">点击了解</view>
					</view>
				</view>
			</view>
			<view class="index_qiang" v-if="coupon1">
				<view class="flex" @click="getYhq(coupon1.id)">
					<view class="left flex flex-align">
						<view class="one">￥</view>
						<view class="two">{{coupon1.price}}</view>
						<view class="tree" style="width: 300rpx;">
							<view class="wenzi">满{{coupon1.full_price}}可用</view>
							<view class="wenzi">{{coupon1.remark}}</view>
						</view>
					</view>
					<view class="right">
						<image src="/static/home/index_an.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="index_qiang" v-if="coupon2">
				<view class="flex" @click="getYhq(coupon2.id)">
					<view class="left flex flex-align">
						<view class="one">￥</view>
						<view class="two">{{coupon2.price}}</view>
						<view class="tree" style="width: 300rpx;">
							<view class="wenzi">满{{coupon2.full_price}}可用</view>
							<view class="wenzi">{{coupon2.remark}}</view>
						</view>
					</view>
					<view class="right">
						<image src="/static/home/index_an.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="index_qiang" v-if="coupon3">
				<view class="flex" @click="getYhq(coupon3.id)">
					<view class="left flex flex-align">
						<view class="one">￥</view>
						<view class="two">{{coupon3.price}}</view>
						<view class="tree" style="width: 300rpx;">
							<view class="wenzi">满{{coupon3.full_price}}可用</view>
							<view class="wenzi">{{coupon3.remark}}</view>
						</view>
					</view>
					<view class="right">
						<image src="/static/home/index_an.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- <view class=" qiangquanT">
				<view class="flex">
					<view class="flex-1" @click="getYhq(coupon2.id)">
						<view class="top flex flex-align">
							<view class="one">￥</view>
							<view class="two">{{coupon2.price}}</view>
							<view class="tree">
								<view class="wenzi">满{{coupon2.full_price}}可用</view>
								<view class="wenzi">{{coupon2.remark}}</view>
							</view>
						</view>
						<view class="bottom">
							<image src="/static/home/index_qq.png" mode=""></image>
						</view>
					</view>
					<view class="flex-1" @click="getYhq(coupon3.id)">
						<view class="top flex flex-align">
							<view class="one">￥</view>
							<view class="two">{{coupon3.price}}</view>
							<view class="tree">
								<view class="wenzi">满{{coupon3.full_price}}可用</view>
								<view class="wenzi">{{coupon3.remark}}</view>
							</view>
						</view>
						<view class="bottom">
							<image src="/static/home/index_qq.png" mode=""></image>
						</view>
					</view>
				</view>
			</view> -->
			<view class="miaosha" v-if="miaosha1">
				<view class="title flex flex-align flex-center">
					<image src="/static/home/index_ms.png" mode=""></image>
				</view>
				<view class="miaoshaList">
					<view class="list" @click="goUrl('/pages/shop/detail?code='+miaosha1.code)">
						<view class=" flex flex-bt">
							<view class="left flex flex-align flex-center">
								<image :src="miaosha1.cover" mode=""></image>
							</view>
							<view class="right">
								<view class="one text_two">{{miaosha1.name}}</view>
								<view class="wenzi ">
									<view class="miaoshu">秒杀价</view>
									<view class="flex" style="align-items: baseline;">
										<view class="fuhao">￥</view>
										<view class="price">{{miaosha1.price_selling}}</view>
										<view class="he">/盒</view>
									</view>
								</view>
								<view class="btns flex flex-align ">
									<image src="../../static/home/index_qg.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="list" v-if="miaosha2">
						<view class=" flex flex-bt" @click="goUrl('/pages/shop/detail?code='+miaosha2.code)">
							<view class="right">
								<view class="one text_two">{{miaosha2.name}}</view>
								<view class="wenzi ">
									<view class="miaoshu">秒杀价</view>
									<view class="flex" style="align-items: baseline;">
										<view class="fuhao">￥</view>
										<view class="price">{{miaosha2.price_selling}}</view>
										<view class="he">/盒</view>
									</view>
									
								</view>
								<view class="btns flex flex-align ">
									<image src="../../static/home/index_qg.png" mode=""></image>
								</view>
							</view>
							<view class="left flex flex-align flex-center">
								<image :src="miaosha2.cover" mode=""></image>
							</view>
							
						</view>
					</view>
				</view>
				<view class="title flex flex-align flex-center" style="margin-top: 50rpx;" v-if="dataList2.length!=0">
					<image src="/static/home/index_bk.png" mode=""></image>
				</view>
			</view>
			<view class="baoKuan  flex flex-line" v-if="dataList2.length!=0">
				<view class="list" v-for="(item,index) in dataList2" :key="index" @click="goUrl('/pages/shop/detail?code='+item.code)">
					<view class="chanpin flex flex-align flex-center">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="wenzi flex flex-bt">
						<view class="left text_two">{{item.name}}</view>
						<view class="right flex">
							<view class="fuhao">￥</view>
							<view class="price">{{item.price_selling}}</view>
						</view>
					</view>
					<view class="btns">
						<image src="../../static/home/index_qg.png" mode=""></image>
					</view>
				</view>
				
			</view>
		</view>
		<tui-login :show="show"  @close="guanbi"></tui-login>
		<view class="" style="height: 120rpx;"></view>
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				title: 'Hello',
				dataList1:[],
				dataList2:[],
				coupon1:'',
				coupon2:'',
				coupon3:'',
				miaosha1:'',
				miaosha2:'',
				banner:[],
				show:false,
				isLogin:false
			}
		},
		onLoad(e) {
			this.getList()
			this.getBanner()
			// this.getData()
			if(e.inviter_code){
				console.log(e.inviter_code)
				uni.setStorageSync('refCode', e.inviter_code)
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onUnload() {
			/** 这里只保留最新的15条会话记录，以保证初次加载性能 */
			uni.$off('isShow');
			uni.$off('isLogin');
		},
		onShow() {
			let that = this
			that.isLogin = this.tui.isLogin()
			uni.$off('isShow');
			uni.$off('isLogin');
			uni.$on('isShow', function(data) {
				console.log(data)
				that.show = true
			});
			uni.$on('isLogin', function(data) {
				that.getData()
				that.isLogin = this.tui.isLogin()
			});
			if(uni.setStorageSync(token)){
				that.getData()
			}
		},
		// #ifdef MP
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '邀请好友',
			  // imageUrl:this.banner[0].img,
		      path: '/pages/index/index?inviter_code='+this.data_user.inviter_code
		    }
		},
		// #endif
		methods: {
			goUrl(e){
				this.tui.href(e)
				// if(this.tui.isLogin()){
				// 	this.tui.href(e)
				// }else{
				// 	uni.reLaunch({
				// 		url: '/pages/login/login'
				// 	})
				// }
			},
			guanbi(){
				this.show = false
			},
			goZhishi(){
				uni.switchTab({
					url:'/pages/yingyang/yingyang'
				})
			},
			getData(){
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						that.data_user = res.data.info
					}
				}).catch((res) => {
					that.is_btn = false
				})
			},
			getYhq(e){
				let that = this
				if(!that.isLogin){
					that.tui.wetLogin()
					return
				}
				that.tui.request("api.auth.nutrition/couponGet", "POST", {coupon_id:e}, false, false, true).then((res) => {
					that.tui.toast(res.info)
					
				}).catch((res) => {
					that.is_btn = false
				})
			},
			getBanner(){
				
				let that = this
				that.tui.request("api.nutrition/banner", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						that.banner = res.data.banner_nome
						
					}
				}).catch((res) => {
					that.is_btn = false
				})
			},
			getList(){
				let that = this
				that.tui.request("api.nutrition/homeInfo", "POST", {}, false, false, false).then((res) => {
					console.log(res)
					if(res.code==1){
						that.dataList1 = res.data.goods_list1
						that.miaosha1 = that.dataList1[0]
						that.miaosha2 = that.dataList1[1]
						that.dataList2 = res.data.goods_list2
						that.coupon1 = res.data.coupon1
						that.coupon2 = res.data.coupon2
						that.coupon3 = res.data.coupon3
					}
				}).catch((res) => {
					that.is_btn = false
				})
			}
		}
	}
</script>

<style lang="less">
	page{background: #adcf88;}
	.banner{
		height: 700rpx;
		width: 750rpx;
		margin-bottom: 30rpx;
		// margin: -200rpx auto 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.screen-swiper{
			height: 100%;
			width: 750rpx;
			min-height: 100% !important;
			image{
				width: 750rpx;
				height: 700rpx;
				border-radius: 10rpx;
			}
		}
	}
	.baoKuan{background: #dfeec9;border-radius:10rpx;border: 1px solid #fff;box-shadow: 1px 1px 7px 1px rgba(65, 132, 41, 0.5);margin-top: -70rpx;padding: 60rpx 20rpx 0rpx;border-radius: 10rpx;
		.list{width: 310rpx;background: #73bc4b;padding:20rpx;margin-right: 20rpx;margin-bottom: 50rpx;border-radius: 10rpx;position: relative;
			.chanpin{width: 270rpx;height: 270rpx;background: #fff;margin: 0 auto;
				image{width: 250rpx;height: 250rpx;}
			}
			.wenzi{margin: 10rpx 0;
				.left{color: #fff;font-size: 24rpx;height: 66rpx;text-shadow: 0px 2px 1px #409f2a;}
				.right{color: #fdf13c;align-items: baseline;text-shadow: 0 2px 1px #007900;
					.fuhao{font-size: 24rpx;}
					.price{font-weight: bold;font-size: 38rpx;}
				}
			}
			.btns{position: absolute;bottom: -30rpx;left: 0;width: 100%;text-align: center;
				image{width: 154rpx;height: 50rpx;}
			}
		}
		.list:nth-child(2n){margin-right: 0;}
	}
	.miaosha{margin: 30rpx 0;
		.title{margin-bottom: 30rpx;
			image{width: 236rpx;height: 79rpx;}
		}
		.list{background: url('/static/home/index_cpbj.png') no-repeat;background-size: 100% 100%;padding:50rpx;margin-bottom: 20rpx;
			.left{width: 240rpx;height: 240rpx;background:#fff ;border-radius: 10rpx;margin-top: -4rpx;box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, 0.3);border-radius: 10rpx;
				image{width: 220rpx;height: 220rpx;}
			}
			.right{width: 350rpx;padding-top: 10rpx;
				.one{color:#4fa232;padding-left: 30rpx;font-size: 26rpx;font-weight: bold;height: 72rpx;text-shadow: 0 2px 1px #fff;}
			    .wenzi{padding-left: 30rpx;align-items: baseline;text-shadow: 0 2px 1px #fff;
				.miaoshu{color: #4fa232;font-size: 24rpx;text-shadow: 0 2px 1px #fff;font-family: none;}
				.fuhao{color: #ff6b19;font-size: 24rpx;}
				.price{color: #ff6b19;;font-size: 46rpx;font-weight: bold;}
			  .he{color: #ff4911;font-weight: bold;}
			  }
			}
			.btns{margin-top: 10rpx;padding-left: 30rpx;
				image{width: 184rpx;height: 60rpx;}
			}
		}
		.list:nth-child(2n){
			.left{margin-right: 0;}
			.right{
				.wenzi,.btns,.one{padding-left: 0;padding-right: 30rpx;}
			}
		}
	}
	.cont{padding:0 30rpx;}
	.index_share{
		.flex-1{background: url('/static/home/index_share.png') no-repeat;background-size: 100% 100%;box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, 0.3);border-radius: 10rpx;
			padding: 50rpx 0 50rpx 140rpx;margin-right: 20rpx;
			.title{font-size: 32rpx;font-weight: bold;color: #458937;margin-bottom: 6rpx;text-shadow: 1px 1px 1px #fff;}
			.smallWen{font-size: 24rpx;color: #3d7931;font-family: none;}
		}
		.flex-1:last-child{margin-right: 0;background: url('/static/home/index_yd.png') no-repeat;background-size: 100% 100%;}
	}
	.index_qiang{background: url('/static/home/index_yhq.png') no-repeat;background-size: 100% 100%;margin: 20rpx 0;padding:40rpx 0 40rpx 40rpx;position: relative;box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, 0.3);border-radius: 10rpx;
		.left{width: 450rpx;color: #4a8f2e;text-shadow: 0px 2px 1px #fff;
			.one{font-size: 24rpx;padding-top: 20rpx;}
			.two{font-size: 74rpx;font-weight: bold;}
			.tree{
				.wenzi{font-size: 24rpx;padding-left: 10rpx;margin-bottom: 6rpx;text-shadow: 0px 2px 1px #fff;font-family: none;}
			}
		}
		.right{width: 225rpx;padding:15rpx 0 0 70rpx ;position: absolute;top: 50rpx;right: 40rpx;
			image{width:170rpx;height: 48rpx;}
		}
		
	}
	.qiangquanT{box-sizing: border-box;
		.flex-1{background: url('/static/home/index_yh.png') no-repeat;background-size: 100% 100%;box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, 0.3);border-radius: 10rpx;
			padding: 44rpx 0 50rpx;margin-right: 20rpx;}
		.top{padding-left: 30rpx;color: #4a8f2e;text-shadow: 0px 2px 1px #fff;
			.one{font-size: 24rpx;padding-top: 20rpx;}
			.two{font-size: 50rpx;font-weight: bold;}
			.tree{
				.wenzi{font-size: 24rpx;padding-left: 10rpx;margin-bottom: 6rpx;text-shadow: 0px 2px 1px #fff;font-family: none;}
			}
		}
		.flex-1:last-child{margin-right: 0;}
		.bottom{text-align: center;position: relative;height: 60rpx;
			image{width:170rpx;height: 48rpx;margin-top: 20rpx;position: absolute;top: 28rpx;left: 50%;margin-left: -85rpx;}
		}
	}
</style>
